@charset "utf-8";
$db-color:#389eac;
$db-textC:#333;

body,
h1,
h2,
h3,
h4,
h5,
h6,a,button,ul {
    text-decoration: none;
    padding: 0;
    margin: 0;
    border:none;
    list-style: none;
}
.book {
    width: 1250px;
    padding-right: 50px;
    box-sizing: border-box;
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap; 
  }
.db-card {
    padding: 20px 20px 20px 10px;
    display: flex;
    // justify-content: space-between;
    width: 540px;
    border-bottom: 1px solid rgba(221, 221, 221, 0.726);
    // height: 176px;
}
.db-card-img{
    // margin-top: 5px;

}
.db-card-img img {
    border-radius: 3px;
    width: 80px;
}

.db-card-text {
    margin-left: 12px;
    h4 {
        font-size: 16px;
        font-weight: 600;

        a {
            text-decoration: none;
        }

        a:active {
            color: $db-textC;
        }

        a:visited {
            color: $db-textC;
        }
    }

    .author {
        color: #777;
        font-size: 12px;
        // margin-top: 5px;
        margin-bottom: 12px;
        #transer::before {
            content: "译 ";
        }
    }

    .detile {
        width: 448px;
        height: 40px;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: 13px;
        line-height: 20px;
        margin-bottom: 8px;
    }

    .ext-detile {
        border-bottom: 8px;
        >span a{
            color: #777;
            font-size: 12px;
        }
        >span a:hover{
            color: $db-color;
        }

        .spera {
            display: inline-block;
            width: 1px;
            height: 10px;
            margin: 0 5px;
            border-left: 1px solid #ddd;
        }
    }

    .card-bottom {
        display: flex;
        justify-content: space-between;
        .price {
            .rmo-tag{
                font-weight: bolder;
            }
            .old-price {
                text-decoration: line-through;
                color: #777;
                font-size: 12px;
            }
            .now-price{
                color:#fa595f;
                font-weight: bolder;
                font-size: 15px;
            }
        }
        .buttons{
            
            .shopping{
                a{
                    img{
                        width: 20px;
                        height: 18px;
                    }
                }
            }
            button{
                width: 76px;
                height: 26px;
                background-color: #fff;
                box-shadow: 1px 1px 3px rgba(0,0,0,.15);
                border-radius: 3px;
                vertical-align: 3px;
                margin-left: 20px;
            }
            button:hover{
                background-color: $db-color;
                color: #fff;
            }
        }
    }

}
.nav{
    width: 1200px;
    height: 40px;
    background-color: #eff2f3;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    svg{
        vertical-align: 3px;
        transition: .3s linear;
        path{
            fill: #000;
        }
    }
    a {
            display: inline-block;
            // vertical-align: -9px;
            line-height: 40px;
            font-size: 12px;
            color: #000;
    }
    a:visited{
        color: #000;
    }
    .nav-select{
        svg{
            margin-left: 10px;
        }
        a{
            padding-left: 10px;
            padding-right: 10px;
        }
        a:hover{
            background-color: $db-color;
            color: #fff;
        }
        // a:hover svg{
        //     transform: rotateZ(180deg);
        // }
        a:hover svg path{
            fill:#fff;
        }
    }
    .nav-sort{
        a{
            padding: 0 10px;
        }
        a:hover{
            background-color: $db-color;
            color: #fff;
        }
    }
}
.db-drop{
    position: relative;
}
.db-drop-down{
    position: absolute;
    left: -60px;
    top: 40px;    
    width: 1200px;
    // height: 200px;
    background-color: #fff;
    padding: 0px 60px 0 60px;
    display: none;
    
        ul:first-child{
            border-bottom: 1px solid rgba(119, 119, 119, 0.301);
        }
        ul{
            padding-bottom: 20px;
        }
        .db-drop-menu{
            display: flex;
            flex-wrap: wrap;
            font-size: 12px;
            margin: 25px;
            // display: none;
            li{
                // margin-left: 20px;
                padding: 0 10px;
                line-height: 18px;
                border-radius: 14px;
                margin: 10px 4px;
                // margin: 0  3px  20px 3px;
                
            }
            li:hover{
                background-color: $db-color;
                color: #fff;
            }
        
    }
}
.spear{
    color: #fff !important;
    background-color:$db-color;
    svg{
        path{
            fill: #fff;
        }
    }
}